<template>
  <div class="header">
    <dv-decoration8 :reverse="true" :key="key" class="decoration8" />
    <div>
      <div class="title">
        {{ prop.title || profile.company }}
      </div>
      <dv-decoration5
        v-if="prop.showDecoration5"
        :key="key"
        :dur="2"
        style="width: 100%; min-width: 100%; height: 40px"
      />
    </div>
    <dv-decoration8 class="decoration8" :key="key" />
    <div class="time">
      <div style="text-align: center; margin: 5px 5px 0 0">正航软件&企管家</div>
      <div>{{ time }}</div>
    </div>

    <div class="left-container">
      <div v-if="showLogo && profile.logo" class="logo">
        <el-image :src="profile.logo" alt="" />
      </div>

      <div class="updateTime" v-if="updateTime">
        <span>更新:</span>
        <span>{{ updateTime }}</span>
      </div>

      <template v-if="$slots.header">
        <slot name="header"></slot>
      </template>
    </div>

    <div class="fullScreen" v-if="fullall">
      <span @click="exitFullScreen">退出全屏</span>
    </div>
  </div>
</template>

<script setup scoped>
import { userStore as useUserStore } from '@/pinia/user.js'
import { ref, onMounted, nextTick } from 'vue'
import moment from 'moment'
import { storeToRefs } from 'pinia'
import screenfull from 'screenfull'

const key = ref(1)

const time = ref(moment().format('YYYY-MM-DD HH:mm:ss'))
const userStore = useUserStore()
const fullall = inject('fullall')
const timer = ref()
const { profile } = storeToRefs(userStore)
const prop = defineProps({
  title: String,
  showDecoration5: {
    type: Boolean,
    default: true
  },
  updateTime: {
    type: String
  },
  showLogo: {
    type: Boolean,
    default: true
  }
})

const exitFullScreen = () => {
  nextTick(() => {
    try {
      if (fullall.value) screenfull.exit(document.querySelector('#screenfullMain'))
    } catch (error) {}
    fullall.value = false
  })
}

onMounted(async () => {
  timer.value = setInterval(() => {
    time.value = moment().format('YYYY-MM-DD HH:mm:ss')
  }, 1000)

  document.addEventListener('resize', () => {
    nextTick(() => {
      key.value++
    })
  })
})

onUnmounted(() => {
  clearInterval(timer.value)
})
</script>

<style scoped lang="scss">
.header {
  width: 100%;
  height: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 32px;
  position: relative;
  overflow: hidden;

  .title {
    text-align: center;
    width: 100%;
    text-overflow: ellipsis;
    color: #fff;
  }

  .time {
    position: absolute;
    font-size: 18px;
    right: 0;
    font-weight: bold;
    color: #fff;
    padding-right: 10px;
  }

  .decoration8 {
    width: 250px;
    height: 40px;
  }

  .left-container {
    position: absolute;
    left: 0;
    font-size: 18px;
    display: flex;
    align-items: center;
    margin-left: 10px;
    margin-right: 20px;
    color: #fff;
  }

  .logo {
    width: 100px;
    margin-right: 20px;
  }

  .fullScreen {
    position: absolute;
    right: 25%;
    font-size: 18px;
    color: #fff;
  }

  .el-avatar {
    background: unset;
  }
}
</style>
